<template>
  <div class="container">
    <div class="app-container">
      <el-tree
        default-expand-all
        :data="depts"
        :props="defaultProps"
        :expand-on-click-node="false"
      >
        <template #default="{ data }">
          <el-row
            type="flex"
            style="width: 100%; height: 40px"
            class="row-bg"
            align="middle"
            justify="space-between"
          >
            <el-col :span="20">
              <span>{{ data.name }}</span>
            </el-col>

            <el-col :span="4">
              <span class="tree-manager">{{ data.managerName }}</span>
              <!-- @command: el语法：点击菜单项触发的事件回调 -->
              <el-dropdown
                style="font-size: 16px"
                @command="(command) => handleCommand(command, data.id)"
              >
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <!-- command：el语法，指令 -->
                  <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                  <el-dropdown-item command="edit">编辑本部门</el-dropdown-item>
                  <el-dropdown-item command="del">删除本部门</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </template>
      </el-tree>
    </div>

    <addDept
      :showDialog.sync="showDialog"
      ref="addDept"
      @updataDepart="getDepartmentList"
    ></addDept>
  </div>
</template>
<script>
import { getDepartmentList, delDepartmentDetail } from "@/api/department";
import { transListToTreeData } from "@/utils/index";
import addDept from "./components/addDept.vue";
export default {
  name: "Department",
  components: {
    addDept,
  },
  data() {
    return {
      depts: [
        {
          name: "传智教育",
          children: [
            { name: "总裁办" },
            { name: "行政部" },
            { name: "财务部" },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "name",
      },
      showDialog: false, // 控制 添加子部门弹窗的显示与隐藏
    };
  },
  created() {
    this.getDepartmentList();
  },
  methods: {
    async getDepartmentList() {
      // 1.获取数据
      const departmentList = await getDepartmentList();
      // 2.存数据
      // this.depts = departmentList;
      this.depts = transListToTreeData(departmentList, 0);
    },
    handleCommand(command, pid) {
      console.log("command", pid);
      switch (command) {
        case "add":
          // 记录当前点击部门的id，为这个部门添加子部门，把这个部门的id传给addDept组件的form.pid上
          this.$refs.addDept.form.pid = pid;
          this.showDialog = true;
          break;
        case "edit":
          this.$refs.addDept.getDepartmentDetail(pid);
          this.showDialog = true;
          break;
        case "del":
          this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(async () => {
            await delDepartmentDetail(pid);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getDepartmentList();
          });
          break;
      }
    },
  },
};
</script>
<style scoped>
.tree-manager {
  width: 50px;
  display: inline-block;
  margin: 10px;
}
</style>
1
